<template>
  <div class="statistics-content statistics-1">
    <div class="grid grid-left">
      <div class="statistics-block">
        <BlockItem style="width: 100%;height: 100%" class="max" title="零工列表">
          <RollList type="1"></RollList>
        </BlockItem>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="零工性别、年龄分布">
          <div class="structure">
            <div class="gender">
              <div class="gender-item" style="margin-right: 20px">
                <img src="@/assets/images/cloud/male.png">
                <div class="gender-info">
                  <div class="percentage">男{{info.malePercent}}%</div>
                  <div style="text-shadow: 0 0 10px #1b7ef2" class="number FZHZGBJ">{{info.male}}<span class="unit">人</span></div>
                </div>
              </div>
              <div class="gender-item">
                <img src="@/assets/images/cloud/female.png">
                <div class="gender-info">
                  <div class="percentage">女{{info.femalePercent}}%</div>
                  <div style="text-shadow: 0 0 10px #fc2466" class="number FZHZGBJ">{{info.female}}<span class="unit">人</span></div>
                </div>
              </div>
            </div>
            <div class="progress" v-for="(item,index) in info.age" :key="index">
              <Progress :height="3" :title="item.name" :percentage="item.percent"></Progress>
            </div>
          </div>
        </BlockItem>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="零活工期占比"></BlockItem>
        <div class="chart" id="chart1"></div>
      </div>
    </div>
    <div class="grid grid-center">
      <div class="map-block" style="position: relative">
        <div id="map"></div>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="各行业零活数量统计" ></BlockItem>
        <div class="chart" id="chart3"></div>
      </div>
    </div>
    <div class="grid grid-right">
      <div class="statistics-block">
        <BlockItem style="width: 100%;height: 100%" class="max" title="今日零活列表">
          <RollList type="2"></RollList>
        </BlockItem>
      </div>
      <div class="statistics-block">
        <BlockItem class="max" title="用工人数占比"></BlockItem>
        <div class="chart" id="chart4"></div>
      </div>
      <div class="statistics-block1">
        <BlockItem class="max" title="计价方式占比"></BlockItem>
        <div class="chart" id="chart5"></div>
      </div>
    </div>
    <!--    <Modal v-if="detail.show" @closeModal="detail.show=false" :title="detail.title" width="1200px" height="800px">-->
    <!--      <div class="html-content" style="height: 100%;width: 100%;overflow-y: auto;background: #fff;padding: 10px" v-html="detail.content"></div>-->
    <!--    </Modal>-->
    <Market  v-if="showMore" @closeMarket="showMore=false" :id="locationId" :title="title" width="1200px" height="400px"></Market>
  </div>
</template>

<script>
import Market from "@/components/Market/Market";
import {getNum} from "@/utils/utils";
import {getSelectCount} from "@/api/statistics-3";
import BlockItem from "@/components/BlockItem/BlockItem";
import Progress from "@/components/Progress/Progress";
import Modal from "@/components/Modal/Modal.vue";
import RollList from "@/components/RollList/RollList.vue";
import {lgcsPostListApi} from "@/api/statistics-3";
const pointInfo=[
  {name:'春光新天地零工市场',coord:['98.51812900','39.72180400']},
  {name:'金泉路社区零工驿站',coord:['98.52834300','39.73554700']},
  {name:'官北沟社区零工驿站',coord:['98.48230500','39.74630400']},
  {name:'广厦社区零工驿站',coord:['98.49012000','39.73550000']},
]
export default {
  name: "Statistics1",
  components: {RollList, Modal, BlockItem,Progress,Market},
  data(){
    return{
      chart1Active:1,
      chart2Active:1,
      chart3Active:1,
      chart4Active:1,
      chart5Active:1,
      locationId: 0,
      numberData:[
        {id:2,color:['#5c6aff','#4a29d8'],name:'总注册人数',icon:'icon-caishouzhongliang',number:0},
        {id:3,color:['#30cbf7','#1997e1'],name:'总访问人数',icon:'icon-caishouzhongliang',number:0},
        {id:4,color:['#12f1b8','#0db5e6'],name:'企业注册数',icon:'icon-caishouzhongliang',number:0},
        {id:5,color:['#f7c759','#fb838f'],name:'岗位总数',icon:'icon-huoche',number:0},
        {id:6,color:['#A27DFD','#8354FB'],name:'匹配成功数',icon:'icon-huoche',number:0},
      ],
      info:{
        malePercent:67.63,
        male:489,
        female:234,
        femalePercent:22.36,
        age:[
          {name:'20岁以下',percent:4},
          {name:'20-30岁',percent:19.39},
          {name:'30-40岁',percent:24.43},
          {name:'40-50岁',percent:22.20},
          {name:'50岁以上',percent:29.98},
        ]
      },
      detail:{
        title:'',
        content:'',
        show:false,
      },
      showMore:false,
      title:'',
    }
  },
  methods: {
    getCount(){
      getSelectCount().then((res)=>{
        if(res.code===200){
          this.numberData[0].number=res.data.customerCount
          this.numberData[1].number=res.data.browseCount
          this.numberData[2].number=res.data.enterpriseCount
          this.numberData[3].number=res.data.jobCount
        }
      })
    },
    initChart1(){
      let myCharts = this.$echarts.init(document.getElementById('chart1'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2391FF','#5AD8A6','#FF745A','#FFC328'],
        legend: {
          orient: 'vertical',
          right: 50,
          top: 15,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:15,
          textStyle: {
            color: "#fff"
          },
        },

        series: [
          {
            type: 'pie',
            radius: '90%',
            center: ['35%', '48%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 22, name: '1-5天' },
              { value: 40, name: '6-15天' },
              { value: 39, name: '16-30天' },
              { value: 48, name: '30天以上' }
            ]
          }
        ]
      };
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initChart2(){
      let myCharts = this.$echarts.init(document.getElementById('chart2'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2391FF','#5AD8A6','#FF745A','#FFC328','#5B8FF9','#0BA165'],
        legend: {
          orient: 'vertical',
          right: 50,
          top: 20,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:8,
          textStyle: {
            color: "#fff"
          },
        },

        series: [
          {
            type: 'pie',
            radius: '90%',
            center: ['35%', '50%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 348, name: '高中' },
              { value: 535, name: '大专' },
              { value: 880, name: '本科' },
              { value: 948, name: '研究生' },
              { value: 235, name: '博士' },
              { value: 280, name: '其他' },
            ]
          }
        ]
      };
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initChart3(){
      let charts = this.$echarts.init(document.getElementById('chart3'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        xAxis: {
          type: 'category',
          data: ['水暖装修','保洁清洗','搬家运货','保姆陪护','电器维修','建筑装饰','电工家具','文体特长','物流运输'],
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
            }
          },
          axisTick:{
            show:false
          }
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        grid:{
          top:15,
          left:60,
          right:10,
          bottom:30
        },
        yAxis: {
          type: 'value',
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLine:{
            show:true,
          },
          axisTick:{
            show:true,
          },
          axisLabel:{
            textStyle:{
              show:true,
              color: '#fff',
              fontSize:14
            }
          },
        },
        series: [
          {
            data: getNum(9,100,0),
            type: 'bar',
            barWidth:13,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(17, 49, 119)',
              borderRadius:50
            },
            itemStyle: {
              normal: {
                label:{
                  show:true,
                  position:'top',
                  textStyle:{
                    color:'#ccc',
                    fontSize:14
                  }
                },
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#2097FE'
                },{
                  offset:1,
                  color:'#02CEF5'
                }])
              }
            }
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    },
    initChart5(){
      let myCharts = this.$echarts.init(document.getElementById('chart5'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2FC9F6','#42EFA7','#5B8FF9'],
        legend: {
          orient: 'vertical',
          right: 60,
          top: 40,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:15,
          textStyle: {
            color: "#fff"
          },
        },

        series: [
          {
            type: 'pie',
            radius: '90%',
            center: ['35%', '48%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 348, name: '短期工' },
              { value: 197, name: '钟点工' },
              { value: 123, name: '计件工' }
            ]
          }
        ]
      };
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initChart4(){
      let myCharts = this.$echarts.init(document.getElementById('chart4'));
      myCharts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        tooltip: {
          trigger: 'item'
        },
        color: ['#2391FF','#5AD8A6','#FF745A','#FFC328'],
        legend: {
          orient: 'vertical',
          right: 50,
          top: 20,
          itemWidth: 10,
          itemHeight: 10,
          itemGap:15,
          textStyle: {
            color: "#fff"
          },
        },

        series: [
          {
            type: 'pie',
            radius: '90%',
            center: ['35%', '48%'],
            selectedMode: 'single',
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                // fontSize: 20,
                // fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 130, name: '1-5人' },
              { value: 89, name: '6-15人' },
              { value: 168, name: '16-30人' },
              { value: 339, name: '30人以上' }
            ]
          }
        ]
      };
      myCharts.hideLoading()
      myCharts.setOption(option);
    },
    initMap() {
      let myCharts = this.$echarts.init(document.getElementById('map'));
      this.$axios.get('/static/js/adq_json.json').then((res) => {
        this.$echarts.registerMap('jqsMap', res.data);
        let option = {
          // visualMap: {
          //   left: 'right',
          //   top: 'bottom',
          //   max:1000,
          //   inRange: {
          //     color: [
          //       'rgba(17,74,112,0.2)',
          //       '#46a9ff',
          //     ]
          //   },
          //   textStyle: {
          //     color: "#fff"
          //   },
          //   calculable: true
          // },
          xAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          yAxis: {
            axisLine: {show: false},
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false}
          },
          series:[
            {
              map: "jqsMap",
              center:[104.62577,35.579764],
              zoom:1.2,
              type:'map',
              top:130,
              data:[],
              width:420,
              label: {
                show: true,
                fontSize: "12",
                color: "#fff"
              },
              itemStyle: {
                borderColor: "#058eb8",
                areaColor: "rgba(17,74,112,0.2)",
                borderWidth: 1,
                shadowBlur: 2,
                shadowColor: "#0f2652",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                },
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                }
              },
              select:{
                itemStyle: {
                  borderColor: "#058eb8",
                  areaColor: "#46a9ff",
                  borderWidth: 1,
                  shadowBlur: 2,
                  shadowColor: "#0f2652",
                },
                label: {
                  show: true,
                  fontSize: "12",
                  color: "#fff"
                }
              }
            }
          ]
        }
        myCharts.on('click',(e)=>{
          if(e.componentSubType=='map'){
            this.title=e.data.name
            this.moreType=2;
            this.showMore=true;
          }
        })
        myCharts.setOption(option)
      })
    },
  },
  mounted() {

    this.initMap();
    this.initChart1()
    //this.initChart2()
    this.initChart3()
    this.initChart4()
    this.initChart5()
    this.getCount()
  }
}
</script>
<style lang="scss">
.html-content{
  img{
    max-width: 100%;
  }
}
</style>
<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 2px solid #05548A;

.statistics-content {
  width: calc(100% - 40px);
  margin: 0 auto;
  margin-top: 20px;
  height: calc(100% - 140px);
  padding: 0 10px;
  .chart {
    width: 100%;
    height: 100%;
  }

  .statistics-block {
    padding: 10px;
    position: relative;
    border: $border;
    //box-shadow: $boxshadow;
    border-radius: 10px;
    background: #0A1456;
    .tab-block{
      position: absolute;
      top: 17px;
      right: 20px;
      display: flex;
      align-items: center;
      height: 30px;
      z-index: 9999;
      .tab:first-child{
        border-radius: 5px 0 0 5px;
      }
      .tab:last-child{
        border-radius: 0 5px 5px 0;
      }
      .tab1{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #46A9FF;
        font-size: 14px;
        border-radius: 30px;
        .export{
          width: 12px;
          margin-right: 5px;
        }
      }
      .tab{
        cursor: pointer;
        height: 100%;
        padding: 0 15px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #46a9ff;
        font-size: 14px;

      }
      .tab.active{
        background: #46a9ff;
      }
    }
  }
}

.statistics-content {
  display: flex;
  flex-direction: row;

  .grid {
    height: 100%;
  }
  .grid.grid-left{
    width: calc((100%/4));
    .statistics-block{
      width: 100%;
      height: 32%;
      padding: 20px;
      .structure{
        height: 100%;
        .gender{
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          .gender-item{
            width: calc(50% - 10px);
            height: 100%;
            display: flex;
            align-items: center;
            img{
              width: 50px;
              height: 100%;
            }
            .gender-info{
              width: calc(100% - 70px);
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin-left: 20px;
              font-size: 14px;
              div{
                color: #fff;
              }
              .number{
                font-size: 20px;
                margin-top: 8px;
                .unit{
                  color: #fff;
                  font-size: 14px;
                  font-family: "Microsoft YaHei";
                }
              }
            }
          }
        }
        .progress{
          width: 100%;
          height: calc(100% - 10px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
      }
      .chart{
        height: calc(100% - 30px);
      }
    }
  }
  .grid.grid-right {
    width: calc(100%/4);
    .statistics-block{
      height: 32%;
      padding: 20px;
      .chart{
        height: calc(100% - 30px);
      }
    }
    .statistics-block1{
      width: 100%;
      height: 31%;
      padding: 20px;
      position: relative;
      border: $border;
      //box-shadow: $boxshadow;
      border-radius: 10px;
      background: #0A1456;
      .chart{
        height: calc(100% - 30px);
      }
    }
  }
  .grid.grid-center{
    width: calc(100%/2);
    padding:0 20px;
    margin-top: 3px;
    .statistics-block{
      width: 100%;
      height: calc(100%/3 - 20px);
      margin-top: 20px;
    }
  }
  .statistics-block{
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 20px;
    .chart{
      width: 100%;
      height: calc(100% - 30px);
    }
  }
  .statistics-block:last-child{
    margin-bottom: 0;
  }
  .map-block{
    width: 100%;
    height: calc(100%/3*2);
    position: relative;
    #map{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .number-block{
      width: 100%;
      display: flex;
      flex-direction: row;
      height: 90px;
      .number-item{
        width: calc((100% - 90px)/4);
        margin-right: 30px;
      }
      .number-item:last-child{
        margin-right: 0;
      }
    }
  }
}
</style>
